<template>
  <n-card class="mb-5">
    <template #header>
      <div class="text-grap-500 text-sm"> {{ data.count }}人在拼单,可直接参与</div>
    </template>

    <n-scrollbar style="height: 60px;">
      <div v-for="(item,index) in rows" :key="index" class="flex items-center h-[60px] px-4">
        <n-avatar :size="45" :src="item.users[0].avatar" round/>
        <span class="ml-2">{{ item.users[0].nickname || item.users[0].username }}</span>
        <div class="ml-auto">
          <p> 还差 <span class="text-rose-500">{{ item.total - item.num }}人</span> 拼成</p>
          <div v-if="item.end_time" class="text-xs text-gray-500 mt-1 flex items-center">
            剩余
            <CountDown :time="item.end_time" @end="handleTimeUp(index)"/>
          </div>
        </div>
        <n-button :loading="item.loading" class="ml-2" size="small" type="primary" @click="handleGroup(item)">去评团
        </n-button>
      </div>
    </n-scrollbar>
  </n-card>
</template>
<script setup>
import {createDiscreteApi, NAvatar, NButton, NCard, NScrollbar} from "naive-ui";


// 响应式数据
const props = defineProps({
  group_id: {
    type: Number,
    default: () => 0
  }
});


let {error, data} = await useGetGroupWorkListApi(props.group_id, 1);


const rows = ref([]);

if (!error.value) {
  console.log(data.value)
  rows.value = data.value.rows.map((o) => {
    o.end_time = new Date(o.created_time).getTime() + o.expire * 60 * 60 * 1000;
    o.loading = false;
    return o;
  })
}

// 剩余事件回调事件
const handleTimeUp = (index) => {
  rows.value.splice(index, 1)
  data.value.count--;
}

// 去评团
const handleGroup = (item) => {
  console.log(item);
  useHashAuth(() => {
    const {dialog} = createDiscreteApi(["dialog"]);
    dialog.success({
      title: "关闭",
      content: "你确定?",
      positiveText: "确定",
      negativeText: "取消",
      onPositiveClick: () => {
        console.log("点击了确定")
        item.loading = true;
        useCreateOrderApi({
          group_id: props.group_id,
          group_work_id: item.id,
        }, 'group').then((res) => {
          if (!res.error.value) {
            navigateTo(`/pay?no=${res.data.value.no}`)
          }
        }).finally(() => {
          item.loading = false;
        })
      }
    });
  })
}

</script>
<style scoped>


</style>
